<template>
  <div :class="['nav-header', scrollPosition > 20 ? 'nav-header-fixed' : '']">
    <!-- Logo and Company Name -->
    <div class="nav-header-brand">
      <van-image
        :src="scrollPosition > 20 ? logo1 : logo2"
        class="brand-logo"
      />
      <div class="brand-text">
        <h1>西安友盟智能科技</h1>
        <h3>Xi'an Youmeng intelligent Electronic Technology</h3>
      </div>
    </div>

    <!-- Mobile Menu Button -->
    <div class="mobile-menu-btn" @click="showMobileMenu = true">
      <van-icon name="bars" size="24" />
    </div>

    <!-- Desktop Navigation -->
    <div class="desktop-nav">
      <div
        v-for="(item, index) in navItems"
        :key="index"
        :class="['nav-item', currentFlag === index ? 'active' : '']"
        @click="gotoPage(index)"
      >
        {{ item }}
      </div>
    </div>

    <!-- Mobile Navigation Popup -->
    <van-popup
      v-model:show="showMobileMenu"
      position="right"
      :style="{ width: '70%', height: '100%' }"
    >
      <div class="mobile-nav">
        <div class="mobile-nav-header">
          <van-image :src="logo1" class="mobile-logo" />
          <van-icon name="cross" size="24" @click="showMobileMenu = false" />
        </div>

        <van-cell-group>
          <van-cell
            v-for="(item, index) in navItems"
            :key="index"
            :title="item"
            :class="{ 'active-cell': currentFlag === index }"
            is-link
            @click="gotoPage(index)"
          />
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import logo1 from "@/assets/img/home/logo4.png";
import logo2 from "@/assets/img/home/logo2.png";
const router = useRouter();
const route = useRoute();

const navItems = ["网站首页", "业务领域", "案例展示", "关于我们"];
const currentFlag = ref(0);
const scrollPosition = ref(0);
const showMobileMenu = ref(false);

const handleScroll = () => {
  scrollPosition.value = window.scrollY || window.pageYOffset;
};

const gotoPage = (index: number) => {
  const routes = {
    0: "mobile_home",
    1: "mobile_business",
    2: "mobile_example",
    3: "mobile_about",
  };

  router.push({
    name: routes[index as keyof typeof routes],
  });

  showMobileMenu.value = false;
};

onMounted(() => {
  scrollPosition.value = window.scrollY || window.pageYOffset;
  window.addEventListener("scroll", handleScroll);
});

// Watch route changes
watch(
  () => route.path,
  (newPath) => {
    const pathMap: Record<string, number> = {
      "/mobile_home": 0,
      "/mobile_business": 1,
      "/mobile_example": 2,
      "/mobile_about": 3,
      "/Exampleitem": 4,
      "/Exampleitem2": 5,
      "/Exampleitem3": 6,
      "/Exampleitem4": 7,
      "/Exampleitem5": 8,
      "/Exampleitem6": 9,
    };
    currentFlag.value = pathMap[newPath] ?? 0;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: all 0.3s ease;
  padding: 10px 20px;
  padding: 10px 0;

  @media (min-width: 768px) {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-fixed {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .brand-text {
      color: #000;
    }
    :deep(.van-icon-bars::before) {
      color: #000;
    }
  }
}

.nav-header-brand {
  display: flex;
  align-items: center;
  // gap: 12px;

  @media (min-width: 768px) {
    margin-left: 18%;
  }

  .brand-logo {
    width: 120px;

    @media (min-width: 768px) {
      width: 160px;
    }
  }

  .brand-text {
    h1 {
      font-size: 21px;
      font-weight: 700;
      margin: 0;

      @media (min-width: 768px) {
        font-size: 24px;
      }
    }

    h3 {
      font-size: 12px;
      margin: 4px 0 0;
      font-weight: normal;

      @media (min-width: 768px) {
        font-size: 14px;
      }
    }
  }
}

.mobile-menu-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

  @media (min-width: 768px) {
    display: none;
  }
}

.desktop-nav {
  display: none;

  @media (min-width: 768px) {
    display: flex;
    gap: 32px;
    margin-right: 18%;
  }

  .nav-item {
    padding: 0 12px;
    line-height: 100px;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover,
    &.active {
      border-bottom: 4px solid #16acfd;
    }
  }
}

.mobile-nav {
  height: 100%;
  display: flex;
  flex-direction: column;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;

    .mobile-logo {
      width: 100px;
    }
  }

  :deep(.van-cell) {
    font-size: 16px;
    padding: 16px;

    &.active-cell {
      color: #16acfd;
      font-weight: 500;
    }
  }
}

// Vant Popup Custom Styles
:deep(.van-popup) {
  background: #fff;
}
</style>
